<template>
  <div class="form-box" :class="{ focus: variable.commentInput_getFocus }">
    <div class="auth-card">
      <div class="input-box">
        <div
          class="rich-input"
          ref="richInput"
          :class="{ empty: variable.comment_text.length === 0 }"
          contenteditable="true"
          spellcheck="false"
          :placeholder="props.placeholder"
          disabled="disabled"
          @focus="inputFocus"
          @input="setTextFun"
        ></div>
        <div class="image-preview-box" v-if="variable.fileList.length > 0 && variable.fileList[0]?.response?.code === 2000">
          <div
            class="image-preview"
            :style="{ backgroundImage: 'url(http://api_devs.wanxikeji.cn/' + variable.fileList[0]?.response?.data + ')' }"
          ></div>
          <div class="clean-btn" @click="variable.fileList = []">
            <el-icon size="12px" color="#fff">
              <Close />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="toolbar" style="margin-top: 12px" v-if="variable.commentInput_getFocus === true">
      <div class="tool">
        <el-popover placement="bottom-start" :width="416" trigger="click" :teleported="false">
          <template #reference>
            <div class="emoji-container picker">
              <div class="emoji-box">
                <i class="iconfont icon-biaoqing"></i>
                <span>表情</span>
              </div>
            </div>
          </template>
          <template #default>
            <el-tabs v-model="variable.emoji_tabs_active" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="😀" name="first">
                <div class="recent-use" v-if="state.emoji_latest.length > 0">
                  <p>最近使用</p>
                  <div class="emoji-list">
                    {{ state.emoji_latest }}
                  </div>
                </div>
                <div class="all-emoji">
                  <p>全部</p>
                  <div class="emoji-list">
                    <EmojiVue @selectEmoji="getEmoji" />
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="😄" name="second">
                <EmojiVue @selectEmoji="getEmoji" />
              </el-tab-pane>
            </el-tabs>
          </template>
        </el-popover>
        <div class="file-picker picker active" @click="fileSubmit">
          <i class="iconfont icon-tupian"></i>
          <span>图片</span>
          <el-upload
            style="display: none"
            class="comment-upload"
            v-model:file-list="variable.fileList"
            :limit="1"
            action="http://api_devs.wanxikeji.cn/api/savePic"
            name="img"
          ></el-upload>
        </div>
      </div>
      <div class="submit">
        <span>Ctrl + Enter</span>
        <el-button type="primary" :disabled="variable.comment_text?.length === 0" @click="submitComment">发布 </el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import EmojiVue from '../common/emojiIcon.vue'
import { ElIcon, ElCollapse, ElCollapseItem, ElPopover, ElTabs, ElTabPane, ElButton, ElUpload, ElImage, ElSkeleton, ElMessage } from 'element-plus'
import { Share, Comment, Star, Close } from '@element-plus/icons-vue'
import { API_replay } from '@/utils/http'
import { reactive, onBeforeUnmount, onMounted, nextTick, ref, watch } from 'vue'
import { useStore } from 'vuex'
const { state, commit } = useStore()
const props = defineProps({
  select: String,
  articleid: Number,
  fatherid: Number,
  placeholder: {
    type: String,
    default: () => {
      return ''
    }
  }
})
const richInput = ref()
const variable = reactive({
  commentInput_getFocus: false,
  comment_text: '',
  fileList: [],
  emoji_tabs_active: 'first'
})
const emit = defineEmits(['sendcomment'])
const handleClick = () => {}
const getEmoji = (value) => {
  commit('save_emoji_latest', value)
  variable.comment_text += value
  let input = document.querySelector('.' + props.select + ' .form-box .rich-input')
  input.innerHTML = variable.comment_text
}
const inputFocus = () => {
  if (state.account.token) {
    variable.commentInput_getFocus = true
  } else {
    commit('set_login_dialog', true)
  }
}
const submitComment = async () => {
  if (!state.account.token) {
    commit('set_login_dialog', true)
    return
  }
  try {
    let { token } = state.account
    let { code, msg } = await API_replay({ token, comment_info: variable.comment_text, article_id: props.articleid, father_id: props.fatherid })
    if (code === 2000) {
      ElMessage.success(msg)
      emit('sendcomment')
      let input = document.querySelector('.' + props.select + ' .form-box .rich-input')
      input.innerHTML = ''
      variable.fileList = []
    } else {
      ElMessage.error(msg)
    }
  } catch (error) {}
}
const editorFocus = (e) => {
  let event = e || window.event
  let target = event.target || event.srcElement
  let formBox = document.querySelector('.' + props.select + ' .form-box')
  if (formBox.contains(target)) {
    variable.commentInput_getFocus = true
  } else {
    variable.commentInput_getFocus = false
  }
}
onMounted(() => {
  window.addEventListener('click', editorFocus)
})
const fileSubmit = () => {
  let input = document.querySelector('.' + props.select + ' .comment-upload .el-upload__input')
  input.dispatchEvent(new MouseEvent('click'))
}
const setTextFun = (e) => {
  let input = document.querySelector('.' + props.select + ' .form-box .rich-input')
  variable.comment_text = e.target.innerHTML
  if (input.innerHTML.length == 0) {
    input.classList.add('empty')
  } else {
    input.classList.remove('empty')
  }
}
onBeforeUnmount(() => {
  window.removeEventListener('click', editorFocus)
})
</script>
